iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

喪屍黑白切系列 第 23

Day 23 | 是最後,但不是結束 - 頁尾

  • 分享至 

  • xImage
  •  

今天要講的是金魚都能懂的網頁切版 : 網頁頁尾版塊 NO006
應該很少網頁沒有頁尾吧!
所以就把他學起來吧!

本篇關鍵字

  • :focusoutline
  • input[type="email"]
  • flex-grow

範例檔

HTML

<footer>
  <div class="main-footer">
    <div class="container">
      <div class="item">
        <h3>關於 Zombie@Dump</h3>
        <ul class="nav">
          <li><a href="#"><i class="fa fa-angle-right"></i> 個人背景</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 文章</a></li>
        </ul>
      </div>
      <div class="item">
        <h3>鐵人賽</h3>
        <ul class="nav">
          <li><a href="#"><i class="fa fa-angle-right"></i> 喪屍黑白切</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 網頁學習雜記</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 敬請期待</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 可能不會有</a></li>
        </ul>
      </div>
      <div class="item">
        <h3>聯絡方式</h3>
        <ul class="nav">
          <li><a href="#"><i class="fa fa-angle-right"></i> Email</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Mobile</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Address</a></li>
        </ul>
      </div>
      <div class="item subs">
        <h3>訂閱電子報</h3>
        <form>
          <input type="email" placeholder="給我你的email!">
          <button>訂閱</button>
        </form>
      </div>
    </div>
  </div>
  <div class="copyright">©Zombie@Dump</div>
</footer>

CSS

.main-footer {
  padding: 100px 0;
  background-color: #488286;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
}

.item {
  width: 270px;
  margin: 0 15px;
}

.item h3 {
  color: #fff;
  padding-bottom: .5em;
  margin-bottom: .5em;
  border-bottom: 1px dotted #fff;
}

.item li {
  margin-bottom: 15px;
}

.item li a {
  color: #fff;
  text-decoration: none;
}

.item li a:hover {
  color: #fed766;
}

.subs form {
  display: flex;
  width: 100%;
  margin: auto 0px;
}

.subs input[type="email"],
.subs button {
  border: none;
  padding: 5px 10px;
}

.subs input[type="email"]:focus,
.subs button:focus {
  outline: none;
}

.subs input[type="email"]:focus::placeholder {
  color: transparent;
}

.subs input[type="email"] {
  width: 0;
  flex-grow: 1;
  color: #f56476;
}

.subs button {
  color: #fff;
  background-color: #0a090c;
  cursor: pointer;
}

.copyright {
  background-color: #0a090c;
  padding: 5px 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

喪屍分解

  • 認識 footer 標籤
  • inputbutton:focus 時會有外框線,可以設定 outline: none 來解決他
  • 認識 input 標籤的各種 type,例如:
    • text
    • number
    • email
    • password
    • radio
    • checkbox
    • submit
    • ...還有一堆,可以看 MDN
  • flex-item 設定 flex-grow: 1,可以讓物件自動補足剩餘空間
  • caret-color 可以設定 input 內游標顏色
  • 常見border-style
    • solid
    • dotted
    • dashed

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是表格。


上一篇
Day 22 | 煩欸!我又忘記密碼了啦 - 登入表單
下一篇
Day 24 | 遙想那個用表格排版的年代
系列文
喪屍黑白切30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言